<!doctype html>
<html lang = "zh">
<head>
    <meta charset = "UTF-8">
    <title>爬虫管理</title>
    <link href = "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel = "stylesheet">
    <link href = "https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel = "stylesheet">
    <script src = "https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src = "https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <link href = "https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel = "stylesheet">
    <script src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src = "https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
    <style>
        .v-input__slot > .v-input__append-inner:last-child {
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id = "app">
    <v-app>
        <template>
            <v-tabs
                v-model = "spiderTab"
                vertical
                background-color = "grey lighten-3"
            >
                <div class = "ma-10">
                    <v-menu
                        offset-y
                    >
                        <template v-slot:activator = "{ on, attrs }">
                            <v-avatar>
                                <img
                                    alt = "Avatar"
                                    src = "img/user.jpg"
                                    style = "width: 200%"
                                >
                            </v-avatar>
                        </template>
                    </v-menu>
                </div>
                <v-tabs-slider :color = "mainColor"></v-tabs-slider>
                <v-tab
                    v-for = "(spider, i) in visible_spider"
                    :href = "`#spider_tab-${i}`"
                    :key = "i"
                >
                    <img
                        :src = "`img/${spider}_grey.svg`"
                        class = "mr-2"
                        style = "width: 2em"
                        :alt = "`img/${spider}_grey.svg`"
                    >
                    {{spiders[spider].name}}
                </v-tab>
                <v-tab-item
                    v-for = "(spider, i) in visible_spider"
                    :value = "`spider_tab-${i}`"
                    :key = "i"
                >
                    <div style = "margin: 1em 6em">
                        <div class = "mb-5 pt-5 pb-1">
                            <v-form
                                @submit.prevent = "startSpider(spider)"
                                v-model = "spiders[spider].valid"
                            >
                                <div class = "d-flex">
                                    <a :href="spiders[spider].url">
                                        <img
                                            :src = "`img/${spider}.svg`"
                                            style = "width: 4em; margin: 0 4em 1.5em 0"
                                            alt = "`img/${spider}.svg`"
                                        >
                                    </a>
                                    <div
                                        v-if = "spiders[spider].query"
                                    >
                                        <div
                                            v-for = "(query, i) in spiders[spider].query"
                                            :key = "i"
                                            style = "flex-grow: 1"
                                        >
                                            <v-text-field
                                                :label = "query.text"
                                                v-model = "query.value"
                                                :rules = "[v => !!v]"
                                                clearable
                                                outlined
                                                rounded
                                                class = "pr-5"
                                            >
                                                <template v-slot:append>
                                                    <v-btn
                                                        id="query-btn"
                                                        type = "submit"
                                                        icon
                                                    >
                                                        <v-icon>mdi-spider</v-icon>
                                                    </v-btn>
                                                </template>
                                            </v-text-field>
                                        </div>
                                    </div>
                                    <div
                                        v-else
                                        class = "d-flex"
                                        style = "flex-direction: column; justify-content: flex-end"
                                    >
                                        <v-btn
                                            type = "submit"
                                            :color = "mainColor"
                                            icon
                                        >
                                            <v-icon color = "black">mdi-spider-thread</v-icon>
                                        </v-btn>
                                    </div>
                                </div>
                            </v-form>
                        </div>
                        <v-data-table
                            :headers = "spiders[spider].headers"
                            :items = "spiders[spider].data"
                            :items-per-page = "10"
                            :search = "spiders[spider].search"
                            multi-sort
                        >
                        </v-data-table>
                    </div>
                </v-tab-item>
                <v-spacer></v-spacer>
                <div class = "ma-4">
                    <v-btn
                        @click="logout()"
                        block
                        outlined
                    >
                        退出
                    </v-btn>
                </div>
            </v-tabs>
        </template>
    </v-app>
</div>
<script>
    function getJWTPayload(jwt) {
        return JSON.parse(atob(jwt.split('.')[1]))
    }

    let token = Cookies.get('token')
    if (!token) {
        window.open('login.html', '_self')
    }
    user = getJWTPayload(token)
    let vue = new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data: {
            mainColor: 'blue',
            spiderTab: null,
            spiders: {
                'bilibili': {
                    name: 'Bilibili',
                    headers: [
                        {text: '标题', value: 'title'},
                        {text: '作者', value: 'author'},
                        {text: '链接', value: 'url'},
                    ],
                    url: 'https://bilibili.com',
                    query: [
                        {text: '关键词', key: 'keyword', value: ''},
                    ],
                    search: '',
                    data: [],
                },
                'douban': {
                    name: '豆瓣电影',
                    headers: [
                        {text: '名称', value: 'name'},
                        {text: '链接', value: 'link'},
                        {text: '评分', value: 'rate'},
                        {text: '摘要', value: 'abstract'},
                        {text: '演员', value: 'stars'},
                    ],
                    url: 'https://movie.douban.com',
                    query: [
                        {text: '关键词', key: 'keyword', value: ''},
                    ],
                    search: '',
                    data: [],
                },
                'jd': {
                    name: '京东商品',
                    headers: [
                        {text: '名称', value: 'name'},
                        {text: '链接', value: 'link'},
                        {text: '价格', value: 'price'},
                        {text: '评论', value: 'comment'},
                    ],
                    url: 'https://jd.com',
                    query: [
                        {text: '关键词', key: 'keyword', value: ''},
                    ],
                    search: '',
                    data: [],
                },
                'netease': {
                    name: 'Netease',
                    headers: [
                        {text: '编号', value: 'id'},
                        {text: '名称', value: 'name'},
                    ],
                    url: 'https://music.163.com/discover/artist/cat',
                    query: false,
                    search: '',
                    data: [],
                },
            },
        },
        methods: {
            startSpider(spider) {
                let form = {}
                let query = this.spiders[spider].query
                if (query) {
                    query.forEach(v => {
                        form[v.key] = v.value
                    })
                }
                axios
                    .post(
                        '/api/start_spider',
                        {
                            spider: spider,
                            query: form,
                        },
                    )
                    .then(response => {
                        this.spiders[spider].data = response.data
                    })
            },
            logout() {
                Cookies.remove('token')
                window.open('login.html', '_self')
            },
        },
        computed: {
            visible_spider() {
                return user.visible_spider
            },
        },
    })
</script>

</body>
</html>